import React from 'react';
import {Routes,Route,Navigate,Outlet,NavLink,useNavigate,useLocation,useSearchParams,useParams} from 'react-router-dom';
import qs from 'qs';
export const First = function () {
    return (
        <>
            <>
                <Routes>
                    <Route path="/" element={<Navigate to={'/a'}/>}></Route>
                    <Route path="/a" element={<A/>}>
                        <Route path={'/a'} element={<Navigate to={'/a/a1'}/>}></Route>
                        <Route path={'/a/a1'} element={<A1/>}></Route>
                        <Route path={'/a/a2'} element={<A2/>}></Route>
                        <Route path={'/a/a3'} element={<A3/>}></Route>
                    </Route>
                    <Route path="/b" element={<B/>}></Route>
                    <Route path="/c/:id?/:name?" element={<C/>}></Route>
                    <Route path="/d" element={<D/>}></Route>
                    <Route path="*" element={<C/>}></Route>
                </Routes>
            </>
        </>
    )

};

 const A = function () {
    return (
        <>
            A component
            <div>
                <NavLink to={'/a/a1'}>goto a1</NavLink>
            </div>
            <div>
                <NavLink to={'/a/a2'}>goto a2</NavLink>
            </div>
            <div>
                <NavLink to={'/a/a3'}>goto a3</NavLink>
            </div>
            <div>
                <Outlet />
            </div>
        </>
    )

};

 const A1 = ()=>{
     const navigate = useNavigate();
     return (
         <>
             a1 component
             <br/>
             <h3>===============a1 将会使用隐式传参到D组件=============></h3>
             <button onClick={()=>{
                 navigate({
                     pathname:'/d'
                 },{
                     state:{
                         id:100001,
                         name:'李四'
                     }
                 })
             }}>
                 a1 将会使用隐式传参到D组件
             </button>
         </>
     )
 }

 const A2 = ()=>{
     const navigate = useNavigate();
     return (
         <>
             a2 component
             <button onClick={()=>{
                 navigate({
                     pathname:'/b',
                     search:qs.stringify({
                         id:1,
                         name:'zs'
                     })
                 },{
                     replace:true,
                 });
             }}>
                 goto b

             </button>
         </>
     )
 }

const A3 = ()=>{
     const navigate = useNavigate();
    return (
        <>
            a3 component
            <br/>
            <h3>=================</h3>
            <button onClick={()=>{
                navigate('/c/100/zs')
            }}>
                goto c
            </button>
        </>
    )
}

 const B = function () {
     const location = useLocation();
     const [searchParams] = useSearchParams();
    return (
        <>
            B component
            <br/>
            <h3>=================></h3>
            <ul>
                {
                    Object.entries(qs.parse(location.search.substring(1))).map(entry => {
                        return (
                            <>
                                <li>{entry[0]}-{entry[1]}</li>
                            </>
                        )
                    })
                }
            </ul>
            <br/>
            <h3>==============useSearchParams==============</h3>
                <li>
                    {searchParams.get('id')}- {searchParams.get('name')}
                </li>
        </>
    )

};

const C = function () {
    const params = useParams();
    return (
        <>
            C component
            <ul>
                {
                    Object.entries(params).map(entry => {
                        return (
                            <ol>
                                {entry[0]}-{entry[1]}
                            </ol>
                        )
                    })
                }
            </ul>
        </>
    )

};

const D = function (){
    const location = useLocation();
    console.log(location);
    return (
        <>
            D component
            <br/>
            <h3>=========D组件接收参数============</h3>
            <ul>
                {
                    Object.entries(location.state).map(entry => {
                        return (
                            <li>
                                {entry[0]}-{entry[1]}
                            </li>
                        )
                    })
                }
            </ul>
        </>
    )
}